<template>
  <div>
    <div class="type_list_R">
      <div class="box_content">
        <div class="box_banner">
          <img
            style="width: 100%"
            src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/1.jpg"
            alt=""
          />
        </div>
        <!-- 分类内容 -->
        <van-grid :column-num="3"  :gutter="10" :icon-size="80">
         
        </van-grid>
        <van-grid :column-num="3"  :gutter="10" :icon-size="80">
          <van-grid-item
            v-for="item in TypeList"
            :key="item.DetailsID"
            :icon="item.icon"
            :text="item.DetailsName"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["TypeList"]),
  },
  created () {
      
  }
};
</script>
<style lang="less" scoped>
.type_list_R {
  float: left;
  width: 75%;
   height: 100%;
  background: #fff;
  overflow: auto;
  .box_content {
    padding: 0.6rem;
     overflow: scroll;
     height: 34.125rem;
  }
  .box_banner {
    width: 100%;
  }
  .title {
    padding-top: 1rem;
    p {
      font-size: 0.85rem;
      color: #ff2150;
      height: 2rem;
      line-height: 2rem;
    }
  }
  .item_list {
    width: 100%;
    margin-top: 0.6rem;
    ul {
      overflow: hidden;
      li {
        float: left;
        width: 31%;
        text-align: center;
        margin-right: 2%;
        overflow: hidden;
        margin-bottom: 0.6rem;
        a {
          display: block;
          height: 100%;
          width: 100%;
        }
        img {
          width: 4.5rem;
        }
        p {
          text-align: center;
          color: #333;
          font-size: 0.75rem;
          height: 1.2rem;
          line-height: 1.2rem;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>